<template>
  <view class="notifications-container container py-4">
    <h2 class="section-title text-center mb-4">
      <text class="title-icon">◈</text>
      消息通知
    </h2>
    
    <view class="notifications-list">
      <uni-list>
        <uni-list-item title="系统通知">
          <template v-slot:footer>
            <switch :checked="settings.system" @change="e => updateSetting('system', e)" />
          </template>
        </uni-list-item>
        <uni-list-item title="活动提醒">
          <template v-slot:footer>
            <switch :checked="settings.activity" @change="e => updateSetting('activity', e)" />
          </template>
        </uni-list-item>
        <uni-list-item title="订单通知">
          <template v-slot:footer>
            <switch :checked="settings.order" @change="e => updateSetting('order', e)" />
          </template>
        </uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const settings = ref({
  system: true,
  activity: true,
  order: true
})

const updateSetting = (key, e) => {
  settings.value[key] = e.detail.value
}
</script>

<style lang="scss" scoped>
.notifications-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.header {
  background: #fff;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.btn-read-all {
  font-size: 24rpx;
  color: #666;
  background: none;
  border: none;
  padding: 10rpx 20rpx;
  
  .bi {
    margin-right: 10rpx;
  }
}

.notification-list {
  padding: 20rpx;
}

.notification-item {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: flex-start;
  
  &.unread {
    background: #f0f9ff;
    
    &::before {
      content: '';
      width: 16rpx;
      height: 16rpx;
      background: var(--td-brand-color);
      border-radius: 50%;
      position: absolute;
      right: 20rpx;
      top: 20rpx;
    }
  }
}

.notification-icon {
  width: 80rpx;
  height: 80rpx;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  
  .bi {
    font-size: 40rpx;
    color: var(--td-brand-color);
  }
}

.notification-content {
  flex: 1;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.content {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.time {
  font-size: 24rpx;
  color: #999;
}
</style>